<script setup lang="ts">
import { computed, inject, ref, toRefs } from 'vue';

const props = defineProps<{
  mode: 'left' | 'right'
}>()

const { mode } = toRefs(props)
const { leftOpen, rightOpen, toggleLeft, toggleRight } = inject('c-aside') as any

// 收起
const collapse = computed(() => mode.value === 'left' ? leftOpen.value : rightOpen.value)
// 切换
const toggle = () => {
  if (mode.value === 'left') {
    toggleLeft()
  } else {
    toggleRight()
  }
}
</script>

<template>
  <aside :class="{
    aside: true,
    'aside-left': mode === 'left',
    'aside-right': mode === 'right',
    'aside-collapse': collapse,
  }">
    <main class="aside-content">
      <slot></slot>
    </main>
    <div :class="{
      'aside-btn': true,
      'aside-btn-left': mode === 'left',
      'aside-btn-right': mode === 'right',
      'aside-btn-collapse': collapse,
    }" @click="toggle"></div>
  </aside>
</template>

<style lang="scss" scoped>
.aside {
  position: absolute;
  top: 0;
  z-index: 20;
  min-height: 600px;
  width: 430px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid;
  border-image: linear-gradient(217deg, #C5D0FF 5%, rgba(5, 88, 255, 0) 70%) ;
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;

  &-left {
    flex-direction: row;
    left: 0;

    &.aside-collapse {
      transform: translateX(-428px);
    }
  }

  &-right {
    flex-direction: row-reverse;
    right: 0;

    &.aside-collapse {
      transform: translateX(100%);
    }
  }

  &-content {
    width: 100%;
  }

  &-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 600px;
    cursor: pointer;

    &-left {
      right: -44px;
      background-image: url('./assets/l-open.svg');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;

      &.aside-btn-collapse {
        background-image: url('./assets/l-close.svg');
      }
    }

    &-right {
      left: -44px;
      background-image: url('./assets/r-open.svg');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      
      &.aside-btn-collapse {
        background-image: url('./assets/r-close.svg');
      }
    }

  }
}
</style>
